<template>
	<view>
		<uni-popup ref="popup1" type="dialog">
			<uni-popup-dialog type="warning" content="确定删除该员工吗? 仅对此房间门禁生效." @confirm="delUser"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup2" type="dialog">
			<uni-popup-dialog type="warning" content="清空后需要重新添加员工到此房间门禁!" @confirm="cleanUser"></uni-popup-dialog>
		</uni-popup>
		<view class="search-bar">
			<uni-search-bar class="search-bar" bgColor="#FFFFFF" placeholder="搜索姓名/工号" @confirm="search"
				v-model="keywords" @cancel="searchCancel" />
		</view>
		<view class="list-wrap">
			<view class="item card-bg" style="padding: 0rpx;" v-for="(item,index) in filter_list" :key="item.id">
				<view class="title" style="padding: 30rpx 20rpx;">
					{{item.realName}}
					<text class="sn">
						({{item.userSn}})
					</text>
				</view>
				<view v-if="isDel==true" class="btn-wrap" @click="openDelUser(item,index)">
					<image src="@/static/ic_del.png" class="btn-del"></image>
				</view>
			</view>
		</view>
		<xw-empty v-if="!filter_list.length" v-on:refresh="queryInfo" text="未添加员工"></xw-empty>
		<uni-fab ref="fabusers" :pattern="pattern" :content="content" direction="horizontal" horizontal="left"
			@trigger="onMenuClick"></uni-fab>
	</view>
</template>

<script>
	import cfg from '@/utils/config.js'
	export default {
		data() {
			return {
				pattern: {
					icon: 'bars'
				},
				content: [{
					iconPath: '/static/ic_clean.png',
					text: '清空',
				}, {
					iconPath: '/static/ic_del.png',
					text: '删除',
				}, {
					iconPath: '/static/ic_add_circle.png',
					text: '选员工',
				}, ],

				id: null,
				name: null,
				list_data: [],
				filter_list: [],

				keywords: '',

				isDel: false,
				delItem: null,
				delIndex: null
			}
		},
		onPullDownRefresh() {
			this.queryInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onLoad(param) {
			this.id = param.id
			this.name = param.name

			uni.setNavigationBarTitle({
				title: param.name
			})

			this.queryInfo()
		},
		methods: {
			onMenuClick(e) {
				if (e.index == 0) {
					this.openCleanUser()
				} else if (e.index == 1) {
					this.isDel = !this.isDel
				} else if (e.index == 2) {
					this.pickUser()
				}
			},
			search() {
				this.filterList()
			},
			searchCancel() {
				this.keywords = ''
				this.filterList()
			},
			filterList() {
				if (this.keywords == null || this.keywords == '') {
					this.filter_list = this.list_data
					return;
				}

				let full_list = this.list_data || []
				let result_list = full_list.filter((item) => item.realName.search(this.keywords) != -1 || item.userSn
					.search(this.keywords) != -1)
				this.filter_list = result_list || []
			},
			openDelUser(item, index) {
				this.delItem = item
				this.delIndex = index

				this.$refs.popup1.open()
			},
			delUser(e) {
				if (!this.delItem && !this.delIndex) {
					return
				}
				uni.request({
					url: cfg.host + 'room/delete/user',
					method: 'POST',
					data: {
						'roomId': this.id,
						'wxUserId': this.delItem.id
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '已删除'
							})
							let itm = this.filter_list[this.delIndex];
							let idx = this.list_data.indexOf(itm)
							if (idx) {
								this.list_data.splice(idx, 1)
							}
							this.filter_list.splice(this.delIndex, 1)
						} else {
							uni.showToast({
								icon: 'none',
								title: '删除失败'
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '删除失败'
						})
					}
				})
			},
			openCleanUser() {
				this.$refs.popup2.open()
			},
			cleanUser() {
				uni.request({
					url: cfg.host + 'room/clear/user/'+this.id,
					method: 'POST',
					data: {
						'id': this.id
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '已清空'
							})
							this.queryInfo()
						} else {
							uni.showToast({
								icon: 'none',
								title: '清空失败'
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '清空失败'
						})
					}
				})
			},
			pickUser() {
				wx.qy.selectEnterpriseContact({
					fromDepartmentId: 0, // 必填，-1表示打开的通讯录从自己所在部门开始展示, 0表示从最上层开始
					mode: "multi", // 必填，选择模式，single表示单选，multi表示多选
					type: ["user"], // 必填，选择限制类型，指定department、user中的一个或者多个
					success: (res) => {
						console.log(res)
						var selectedUserList = res.result.userList; // 已选的成员列表
						let ids = [];
						for (var i = 0; i < selectedUserList.length; i++) {
							ids.push(selectedUserList[i].id)
						}
						if (ids.length > 0) {
							this.addUser(ids)
						}
					}
				});
			},
			addUser(ids) {
				uni.request({
					url: cfg.host + 'room/add/user',
					method: 'POST',
					data: {
						'roomId': this.id,
						'deptIdList': [],
						'userIdList': ids
					},
					success: (res) => {
						if (res.data.code == 0) {

							let data = res.data.data
							let addNum = data.addNum || 0
							uni.showToast({
								icon: 'success',
								title: '新增成功 ' + addNum + '人'
							})

							let arr = data.userList || []
							this.list_data = arr
							this.filter_list = arr
						} else {
							uni.showToast({
								icon: 'error',
								title: '添加失败'
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '添加失败'
						})
					}
				})
			},

			queryInfo() {
				uni.request({
					url: cfg.host + 'room/get/' + this.id,
					success: (res) => {
						if (res.data.code == 0) {
							let data = res.data.data
							if (data) {
								this.list_data = data.userList || []
								this.filter_list = data.userList || []
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.search-bar {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #f5f5f5;
	}

	.list-wrap {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;

		.title {
			flex: 1;
			font-size: 30rpx;

			.sn {
				font-size: 26rpx;
				color: #666;
				margin-left: 12rpx;
			}
		}

		.btn-wrap {
			padding: 0rpx 40rpx;

			.btn-del {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>